<template>
  <view class="shop-box" v-show="pageLoaded">
    <view class="sticky-box">
      <view class="shop-heard-box">
        <view class="left">
          <image
            class="shop-icon"
            :src="`${img_baseUrl}/statics/std/static/new/shop_detail.png`"
          />
        </view>
        <view class="right">
          <view class="title">{{ info.name }}</view>
          <view
            class="shop-desc-box"
            v-if="info.storeDesc"
            :class="{ 'show-more': isShowMore }"
          >
            <view class="shop-desc">
              {{ info.storeDesc }}
            </view>
            <view
              class="shop-option-box"
              v-if="!isShowMore"
              @click="changeMore()"
            >
              <view class="option-text">展开</view>
              <image
                class="shop-more-icon"
                :src="`${img_baseUrl}/statics/std/static/new/icon-shop-more.png`"
              ></image>
            </view>
            <view
              class="shop-option-box"
              v-if="isShowMore"
              @click="changeMore()"
            >
              <view class="option-text">收起</view>
              <image
                class="shop-more-icon"
                :src="`${img_baseUrl}/statics/std/static/icon-shop-pack-up.png`"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view class="tabs">
        <v-tabs :tabs="tabs" @changeType="changeType" :selected="currentTab" :live='true'/>
      </view>
    </view>
    <view class="shop-list-box">
      <view class="lists">
        <view
          class="item"
          v-for="item in dataList"
          :key="item.id"
          @click="toPage('/page_mall/detail/detail', { id: item.id })"
        >
          <image class="shop-image" :src="img_baseUrl + item.imgAbbrev"></image>
          <view class="shop-info">
            <view class="shop-title">{{ item.name }}</view>
            <view class="price">¥{{ item.price == 0 ? '0.00' : (item.price / 100).toFixed(2) }}</view>
          </view>
        </view>
      </view>
      <view class="noData" v-if="dataList.length === 0">
        <image src="@/static/noData.png"></image>
        <text>暂无商品</text>
      </view>
    </view>
  </view>
</template>

<script>
import vTabs from "../../components/tabs.vue";
import { requestGet } from "../../utils/request";

const img_api = process.env.VUE_APP_BASEURL_IMG_API;

export default {
  components: { vTabs },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pageLoaded: false,
      loading: 2, // 0:不再加载; 1:加载中; 2:加载完成;
      img_baseUrl: img_api,
      info: {},
      isShowMore: false,
      tabs: [],
      currentTab: "",
      pageNum: 1,
      pageSize: 10,
      dataList: [],
    };
  },
  mounted() {
    Promise.all([this.getInfo(), this.getType()]).then(() => {
      this.pageLoaded = true;
    });
  },
  onReachBottom() {
    this.loadNextPage();
  },
  methods: {
    toPage(url, params = {}) {
      let paramsString = "";
      for (const paramsKey in params) {
        if (!paramsString) {
          paramsString += "?";
        } else {
          paramsString += "&";
        }
        paramsString += `${paramsKey}=${params[paramsKey]}`;
      }
      uni.navigateTo({
        url: `${url}${paramsString}`,
      });
    },
    changeMore() {
      this.isShowMore = !this.isShowMore;
    },
    changeType({ type }) {
      this.currentTab = type;
      this.pageNum = 1;
      this.getList(this.currentTab).then(() => {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      });
    },
    loadNextPage() {
      if (this.loading === 0 || this.loading === 1) return;
      this.pageNum++;
      this.getList(this.currentTab);
    },
    getInfo() {
      return requestGet(`/shop/mobile/store/${this.id}`)
        .then((res) => {
          this.info = res.data;
        })
        .catch((err) => console.log("错误了", err));
    },
    getType() {
      return requestGet("/shop/mobile/goods/category/search", {
        level: "1",
      })
        .then(({ code, data: tabs }) => {
          if (code !== 200) {
            tabs = [];
          }
          const defaultTab = {
            label: "",
            text: "全部",
          };
          this.tabs = [].concat(
            [defaultTab],
            tabs.map((item) => {
              return {
                label: item.id,
                text: item.name,
              };
            })
          );
        })
        .catch((err) => console.log("错误了", err));
    },
    getList(currentTab) {
      if (this.loading === 1) {
        return Promise.reject({
          msg: "loading...",
        });
      }
      this.loading = 1;
      return requestGet(`/shop/mobile/goods/list`, {
        storeId: this.id,
        categoryId: currentTab,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then(({ code, rows: lists, total }) => {
          if (currentTab !== this.currentTab) return;
          if (code !== 200) {
            lists = [];
            total = 0;
          }

          if (this.pageNum === 1) {
            this.dataList = [].concat(lists);
          } else {
            this.dataList = this.dataList.concat(lists);
          }

          if (lists.length < this.pageSize || total === this.dataList.length) {
            this.loading = 0;
          } else {
            this.loading = 2;
          }
        })
        .catch((err) => console.log("错误了", err));
    },
  },
};
</script>

<style lang="scss">
.shop-box {
  background-color: #f7f9fa;
}

.sticky-box {
  position: sticky;
  top: 0;
  background-color: #f7f9fa;
}

.shop-heard-box {
  margin: 0 32rpx;
  padding: 24rpx 0 40rpx;
  display: flex;

  .left {
    width: 96rpx;
    height: 96rpx;
    margin-right: 24rpx;
    flex: none;

    .shop-icon {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .right {
    flex: auto;
    min-width: 0;
    min-height: 96rpx;

    .title {
      font-size: 32rpx;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.9);
      line-height: 44rpx;
    }

    .shop-desc-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18rpx;

      &.show-more {
        display: block;

        .shop-desc {
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
          text-align: justify;
        }

        .shop-option-box {
          justify-content: flex-end;
          padding-top: 16rpx;
        }
      }
    }

    .shop-desc {
      width: 474rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .shop-option-box {
      display: flex;
      align-items: center;
    }

    .option-text {
      font-size: 24rpx;
      font-weight: 400;
      color: #3FAA73;
      line-height: 34rpx;
      margin-right: 4rpx;
    }

    .shop-more-icon {
      display: block;
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.tabs {
	box-sizing: border-box;
  padding: 38rpx 32rpx 14rpx;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  background: #ffffff;
}

.shop-list-box {
  background: #ffffff;

  .lists {
    padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    .item {
      background: #ffffff;
      box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149, 157, 165, 0.2);
      border-radius: 24rpx;
      overflow: hidden;
    }

    .shop-image {
      display: block;
      width: 100%;
      height: 328rpx;
      border-radius: 4rpx;
    }

    .shop-info {
      padding: 24rpx;
    }

    .shop-title {
      height: 80rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.8);
      line-height: 40rpx;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 控制显示的行数 */
      -webkit-box-orient: vertical;
    }

    .price {
      padding-top: 26rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #ff7614;
      line-height: 34rpx;
    }
  }
}

.noData {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500rpx;

  image {
    height: 240rpx;
    width: 240rpx;
    flex: 0 0 auto;
  }

  text {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.3);
    line-height: 34rpx;
  }
}
</style>
